<template>
	<div id="app" class="weui-tab">
		<div class="weui-tab__bd">
			<div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
				<header class="demos-header"><span class="header-title">周期账单</span></header>
				<div class="weui-cells">
					<div class="weui-cells__title">户表选择</div>
					<div class="weui-cell weui-cell_select">
						<div class="weui-cell__bd">
							<select class="weui-select" @change="change" v-model="idx">
								<optgroup :label="item.contactAddress" v-for="(item,index) in userList">
									<option :value="index">户名{{item.customerName}}-表号：{{item.meterNumber}}</option>
								</optgroup>
							</select>
						</div>
					</div>
					<div class="weui-cells__title">年度选择</div>
					<div class="weui-cell weui-cell_select">
						<div class="weui-cell__bd">
							<select class="weui-select" v-model="selectIdx" @change="change">
								<option :value="i" v-for="(vo,i) in years" :key="i">{{vo}}</option>
							</select>
						</div>
					</div>
					
					<div class="weui-cells__title">历史账单</div>
					<div class="weui-cells">
						<div class="weui-cell">
							<table class="mobile-table">
								<thead class="mobile-thead">
									<th>账单周期</th>
									<th>用水量(方)</th>
									<th>水费(元)</th>
									<!-- <th>余额(元)</th> -->
								</thead>
								<tbody class="mobile-tbody">
									<tr v-for="(item,i) in billList" :key="i">
										<td>{{item.yearmonth}}</td>
										<td>{{parseFloat(item.meterWaterVolume)}}</td>
										<td>{{parseFloat(item.totalAmount)}}</td>
										<!-- <td>{{parseFloat(item.cycleendbalance)}}</td> -->
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div class="weui-cells__title">年度水费(单位:元)</div>
					<div class="weui-cells">
						<div class="weui-cell">
							<div id="myChart" _echarts_instance_="ec_1661388282821"
								style="width: 100%; height: 300px; -webkit-tap-highlight-color: transparent; user-select: none;">
								<div style="position: relative; width: 100%; height: 300px; padding: 0px; margin: 0px; border-width: 0px;">
									<view><l-echart ref="chart"></l-echart></view>
								</div>
							</div>
						</div>
					</div>
				</div><br><br>
			</div>
		</div>
		<div class="weui-tabbar">
			<navigator url="/pages/index/index" class="weui-tabbar__item weui-bar__item--on router-link-active">
				<div class="weui-tabbar__icon"><img src="static/home-logo.png" alt=""></div>
				<p class="weui-tabbar__label">首页</p>
			</navigator>
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		data() {
			return {
				code: '',
				userList: [],
				billList:[],
				years:[],
				idx:0,
				selectIdx:0,
				option: {
					xAxis: {
						type: 'category',
						data: []
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: ['20','30','40.82'],
						type: 'line',
						lineStyle: {
							color: '#b5301f'
						},
						itemStyle: {
							// 设置线条上点的颜色（和图例的颜色）
							normal: {
							  color: '#b5301f',
							},
						  },
					}]
				}
				        
			}
		},
		mounted() {
			
			
		},
		onLoad() {
			var _this = this;
			this.years=this.getYears();
			this.$util.checkLogin(function(token) {
				console.log("token:" + token)
				_this.$request.getUserList(token, function(list) {
					_this.userList = list;
					_this.getData();
				})
			})
			
		},
		methods: {
			
			getYears(){
				let date=new Date();
				let year=date.getFullYear();
				let years=[]
				for(let i=0;i<3;i++){
					years.push(year--)
				}
				return years;
			},
			getData(){
				this.$request.get("read/readMeter/getBillList",{'meterId':this.userList[this.idx].meterId,'year':this.years[this.selectIdx]}).then(res => {
					let months=[], datas=[], billList=[];
					res.result.forEach(vo =>{
						months.push(vo.yearmonth.split('-')[1])
						datas.push(vo.totalAmount)
						billList.push(vo)
					})
					this.billList=billList;
					this.option.xAxis.data=months;
					this.option.series[0].data=datas;
					this.$refs.chart.init(echarts, chart => {
						chart.setOption(this.option);
					});
				})
			},
			change(e){
				this.getData()
			}
		}
	}
</script>

<style>
table{
	border-spacing: 0px;
	display: table;
	border-collapse: separate;
	box-sizing: border-box;
	border-right: 1px solid #d6b69b;
	border-top: 1px solid #d6b69b;
}
 .mobile-table td, .mobile-table th {
    border-bottom: 1px solid #d6b69b;
    border-collapse: collapse;
	border-left: 1px solid #d6b69b;
}
table tr:nth-child(odd) {
    background-color: #f1f1f1;
}
.mobile-table {
    width: 100%;
    text-align: left;
    font-size: .8em;
    font-weight: 100;
}
th {
    display: table-cell;
    vertical-align: inherit;
    font-weight: bold;
    text-align: -internal-center;
}
</style>
